<template>
  <div class="notification-test">
    <h2>本地通知测试</h2>

    <button @click="sendSimpleNotification">发送普通通知</button>
    <button @click="sendScheduledNotification">发送定时通知（5秒后）</button>
    <button @click="clearAllNotifications">清除所有通知</button>

    <p v-if="lastNotification">最后点击的通知内容: {{ lastNotification }}</p>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
const lastNotification = ref(null)

onMounted(() => {
  document.addEventListener('deviceready', () => {
    // 监听通知点击事件
    cordova.plugins.notification.local.on('click', (notification) => {
      console.log('通知被点击:', notification)
      lastNotification.value = notification.text
    })

    // 请求通知权限（iOS 必须）
    cordova.plugins.notification.local.registerPermission((granted) => {
      if (granted) {
        console.log('通知权限已允许')
      } else {
        alert('通知权限被拒绝')
      }
    })
  }, false)
})

// 发送普通通知
function sendSimpleNotification() {
  cordova.plugins.notification.local.schedule({
    id: 1,
    title: '新消息',
    text: '这是一条即时通知，请查收！',
    foreground: true, // 前台也显示
    data: {
      url: '/notifications'
    }
  })

  alert('已发送一条即时通知')
}

// 发送定时通知（5秒后）
function sendScheduledNotification() {
  const now = new Date().getTime()

  cordova.plugins.notification.local.schedule({
    id: 2,
    title: '定时提醒',
    text: '这是5秒前设置的提醒',
    at: new Date(now + 5000), // 当前时间+5秒
    autoClear: true,          // 点击后自动清除
    foreground: true
  })

  alert('已发送一条定时通知（5秒后）')
}

// 清除所有通知
function clearAllNotifications() {
  cordova.plugins.notification.local.clearAll(() => {
    alert('所有通知已清除')
  })
}
</script>

<style scoped>
.notification-test {
  padding: 20px;
}

button {
  display: block;
  margin: 10px 0;
  padding: 10px 20px;
  font-size: 16px;
}
</style>
